<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2021/07/10
  File: is-指令.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>is-指令</title>
    <style>

    </style>
</head>

<body>
    <!-- 
        is属性仅限于用在component标签上
        vue3中设置动态组件时，is属性仅能用于component标签上
        <component is="comp"></component>
     -->
    <div id="app">
        <table>
            <!--
                dom内模板解析使用v-is代替
                【仅限in-dom模板】
            -->
            <tr v-is="'row'" v-for="item in items" :data="item"></tr>
        </table>
    </div>

    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <script>
        // 创建 Vue 实例 , 得到ViewModel
        var vm = Vue.createApp({
            data() {
                return {
                    items: ["aaa", "bbb", "ccc"]
                }
            }
        }).component("row", {
            props: ["data"],
            template: "<tr><td>{{ this.data }}</td></tr>"
        }).mount("#app")
    </script>
</body>

</html>